<template>
	<view class="content">
		<u-navbar :title="title" :is-back="false" :border-bottom="false" :background="background" title-color="#fff"
			v-if="option"></u-navbar>
		<view class="top">
			<image class="banner" :src="banner" mode="widthFix"></image>
		</view>
		<view class="inContent">
			<view class="leftBox">
				<view class="leftBoxContent">
					<view class="leftBoxView">
						<view class="iconfont icon-nansheng"></view>
						<text class="boxLeftText">男生盲盒</text>
					</view>
					<button class="leftButton" @click="putMan">放入一张男生字条</button>

					<button class="leftButton" @click="getMan">取出一张男生字条</button>
				</view>
			</view>
			<view class="rightBox">
				<view class="rightBoxContent">
					<view class="rightBoxView">
						<view class="iconfont icon-nvsheng"></view>
						<text class="boxRightText">女生盲盒</text>
					</view>
					<button class="rightButton" @click="putWoman">放入一张女生纸条</button>
					<button class="rightButton" @click="getWoman">取出一张女生纸条</button>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import API from '@/api/api.js';
	export default {
		data() {
			return {
				advert: [],
				swiperColor: 'rgba(0,0,0,0)',
				swiperList: [],
				stickyList: [],
				posts: [],
				current: 0,
				banner: "https://img1.baidu.com/it/u=1658212502,567001803&fm=26&fmt=auto",
				page: 1,
				option: false,
				cats: [{
					id: 0,
					name: '全部',
					except: true
				}],
				activeStyle: {
					'font-size': '38rpx',
					color: '#434343'
				},
				showNavs: false,
				background: {
					backgroundColor: '#50cc99'
				},
				isLastPage: false,
				status: 'loading',
				offset: 44,
				title: '',
				systemHeight: 400,
			};
		},
		onLoad() {
			this.getBanner();
		},
		onReady() {},
		methods: {
			getBanner: function() {
				API.getBanner()

					.then(res => {
						// if (res.status === 200) {
						this.swiperList = res;
						// }
					})
					.catch(err => {
						console.log(err);
					});
			},
			getMan: function() {
				const userId = uni.getStorageSync('userId');
				var data = {
					"userId": userId,
					"sex": "1"
				}
				if (!this.isLogin()) {
					return;
				}
				API.getSpot(data)
					.then(res => {
						console.log("获取男生纸条")
						uni.showToast({
							title: '微信号：' + res.wechatNumber,
							mask: false,
							duration: 1000
						});
					})
					.catch(err => {
						console.log(err);
					});
			},
			putMan: function() {
				const userId = uni.getStorageSync('userId');
				var data = {
					"userId": userId,
					"sex": "1"
				}
				if (!this.isLogin()) {
					return;
				}
				API.getSpotStatus(data)
					.then(res => {
						console.log(res)
						if (res == true) {
							API.putSpot(data)
								.then(res => {
									uni.showToast({
										title: '已投入',
										mask: false,
										duration: 1000
									});

								})
								.catch(err => {
									console.log(err);
								});
						} else {
							uni.navigateTo({
								url: "/pages/index/insertMyNode?userId=" + userId
							})
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			getWoman: function() {
				console.log("获取女生纸条")
				const userId = uni.getStorageSync('userId');
				var data = {
					"userId": userId,
					"sex": "2"
				}
				if (!this.isLogin()) {
					return;
				}
				API.getSpot(data)
					.then(res => {
						console.log("获取男生纸条")
						uni.showToast({
							title: '微信号：' + res.wechatNumber,
							mask: false,
							duration: 1000
						});
					})
					.catch(err => {
						console.log(err);
					});
			},
			putWoman: function() {
				console.log("放入女生纸条")
				const userId = uni.getStorageSync('userId');
				var data = {
					"userId": userId,
					"sex": "2"
				}
				if (!this.isLogin()) {
					return;
				}
				API.getSpotStatus(data)
					.then(res => {
						console.log(res)
						if (res == true) {
							API.putSpot(data)
								.then(res => {

									uni.showToast({
										title: '已投入',
										mask: false,
										duration: 1000
									});

								})
								.catch(err => {
									console.log(err);
								});
						} else {

						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			gotoBanner: function(e) {
				let url = this.swiperList[e].url;
				if (this.swiperList[e].type == 'app') {
					let urls = url.split('|');
					let appid = urls[0];
					let path = urls[1] || 'pages/index/index';
					uni.navigateToMiniProgram({
						appId: appid,
						path: path
					});
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
			isLogin() {
				// const value = uni.getStorageSync('access_token');
				const value = uni.getStorageSync('userId');
				console.log(value);
				if (value == null || value == "" || !value) {
					console.log(value);

					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false;
				}
				return true;
			}
		}
	};
</script>

<style lang="scss">
	@import '../../static/iconfont/iconfont.css';

	.top {
		// padding-top: 100rpx;
		font-size: 28rpx;
		color: #333;
		position: relative;
		font-family: Helvetica Neue, Helvetica, sans-serif;

		.swiper-content {
			padding: 30rpx 0rpx;


		}

		.banner {
			padding: 20rpx 0rpx;
			border-radius: 50rpx;
			width: 96%;
			margin-left: 2%;
			margin-right: 2%;
			margin-bottom: 50rpx;
		}

	}

	.inContent {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		height: 600rpx;
		width: 100%;

		.leftBox {
			margin-left: 2%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			// float: left;
			width: 46%;
			height: 100%;
			border-radius: 20rpx;
			background-color: #6791f3;

			.leftBoxContent {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				width: 300rpx;
				height: 400rpx;

				.leftBoxView {
					border-radius: 10rpx;
					width: 200rpx;
					height: 200rpx;
					background-color: #fdfff5;
				}

				.leftButton {
					margin-top: 20rpx;
					width: 300rpx;
					height: 50rpx;
					background-color: #1a1a1a;
					line-height: 50rpx;
					font-size: 30rpx;
					text-align: center;
					color: #ffffff;
					font-weight: bold;
				}
			}
		}

		.rightBox {
			margin-right: 2%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			width: 46%;
			height: 100%;
			border-radius: 20rpx;
			background-color: #ed65ba;

			.rightBoxContent {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				width: 300rpx;
				height: 400rpx;

				.rightBoxView {
					border-radius: 10rpx;
					width: 200rpx;
					height: 200rpx;
					background-color: #fdfff5;
				}

				.rightButton {
					margin-top: 20rpx;
					width: 300rpx;
					height: 50rpx;
					background-color: #1a1a1a;
					line-height: 50rpx;
					font-size: 30rpx;
					text-align: center;
					color: #ffffff;
					font-weight: bold;
				}
			}
		}
	}

	.icon-nvsheng {
		font-size: 80rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
		color: #ce75ad;
	}

	.icon-nansheng {
		font-size: 80rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
		color: #8f9cbc;
	}

	.boxLeftText {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #8f9cbc;
	}

	.boxRightText {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #ce75ad;
	}

	.wrap {
		padding: 24rpx;
	}

	.close-btn {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
